<template>
	<view class="col" style="position: relative;">
		
		<records v-if="type==0"> </records>
		<collects v-if="type==1"> </collects>
		<attends v-if="type==2"> </attends>
		<view class="bottom row-center">
			<image :src="type==0?'/static/images/me-foot3.svg':'/static/images/me-foot2.svg' " class="icon" style="margin-right: 100rpx;" @click="changeType(0)"></image>
			<image :src="type==1?'/static/images/me-collect3.svg':'/static/images/me-collect2.svg' " class="icon"  style="margin-right: 100rpx;" @click="changeType(1)"></image>
			<image :src="type==2?'/static/images/me-zan3.svg':'/static/images/me-zan2.svg' " class="icon" @click="changeType(2)"></image>
		</view>
	</view>
</template>

<script>
	import  records from  './records.vue'
	import  collects from  './collects.vue'
	import  attends from  './attends.vue'
	
	export default {
		components:{
			records,collects,attends
		},
		data() {
			return {
				type:0
			}
		},
		onLoad(option) {
			this.type = option.type
		},
		methods: {
			changeType(type){
				this.type = type
			}
		}
	}
</script>

<style scoped lang="scss">
	
.bottom{
	width: 100%;
	bottom: 0;
	position: fixed;
	background-color: #f8f8f8;
	height: 160rpx;
	.icon{
		width: 60rpx;
		height: 60rpx;
	}
	
}
</style>
